<template>
    <div class="dt" ref='dtwidth' >
    	
    	<div class="wdxq_title flex align_center">
			<i class="el-icon-arrow-left" style="float: left;margin-left: 4%;font-size: 2.4rem;" @click="fh"></i>
			<span class="flex1">个人动态</span>
			<div class="homePage_titleImg" @click="fb">
				<img src="../../../../static/img/images/dt1.jpg" style="width: 100%;"  />
			</div>
		</div>
		<div class="wdxq_div10 clear2">
			<div class="wdxq_div10l wdxq_div10active">
				<span>我的发帖</span>
			</div>
			<div class="wdxq_div10l" @click="$router.push({path: '/wode/wdpl'})">
				<span>我的评论</span>
			</div>
		</div>
		<div class="xiaoxi2 " v-for="(data,key) in dtList" @click="jump(data.d_id)" v-if='dtList.length!=0'>
     		<div class="flex" style="margin-bottom: 1rem;">
     			<div class="xiaoxi2_img" @click.stop="jump2(data.uid)">
	     			<img :src="data.head_img_s"  @error='(e)=>{e.target.src="../../../../static/img/images/people.jpg"}' />
	     		</div>
	     		<div class="xiaoxi2_text flex1">
	     			<div class="xiaoxi2_d1 flex align_center">
	     				<p class="xiaoxi2_p1 flex1">
	     					<span>{{data.username}}</span>
	     					<span style="color: #fff;background: #4297ff;font-size: 12px;padding: 0 2px;border-radius: 3px;margin-left: 3px;" :class="data.is_member_code==0?'hui':''">实名</span>
	     				</p>
	     				<p class="xiaoxi2_p2">23:00</p>
	     			</div>
	     			<div class="xiaoxi2_d2" style="height: 1.5rem;line-height: 1.5rem;">
	     				<div class="xiaoxi2_d3 flex align_center" style="background: #feb3c5;" v-if="data.gender=='2'">
	     					<img src="../../../../static/img/images/dt2.png" />
	     					{{data.age}}岁
	     				</div>
	     				<div class="xiaoxi2_d3 flex align_center" style="background: #aec7f2;" v-else>
	     					<img src="../../../../static/img/images/dt3.png" />
	     					{{data.age}}岁
	     				</div>
	     				
	     				<div class="xiaoxi2_d3" style="background: #b042ff;" v-if="data.jw_purpose==1">
	     					交友
	     				</div>
	     				<div class="xiaoxi2_d3" style="background: #b042ff;" v-if="data.jw_purpose==2">
	     					婚恋
	     				</div>
	     				<div class="xiaoxi2_d3" style="background: #b042ff;" v-if="data.jw_purpose==3">
	     					学习
	     				</div>
	     			</div>
	     		</div>
     		</div>
     		<div class="flex" style="position: relative;margin-bottom: 0.6rem;" v-if="data.d_content.trim()!=''" >
     			<div class="dt_text " v-html="data.d_content" :class="!data._show?'dt_texthide':'dt_textshow'">
     				{{data.d_content}}
     			</div>
     			<p v-if='data.d_content!=""&&data.d_content.length>90' :class="!data._show?'dt_text2hide':'dt_text2show'"  @click.stop="yinc(key)">{{!data._show?'展开':'隐藏'}}</p>
     		</div>
     		
     		<div class="flex" v-if="data.music_data.length!=0" style="padding: 0.5rem;margin-bottom: 1rem;background: #f5f5f5;" @click.stop="yybftrue(data.music_data.audio_url,key)">
     			<div class="xiaoxi2_img" style="width: 5rem;height: 5rem;border-radius: 0;">
	     			<img :src="data.music_data.image_url"  @error='(e)=>{e.target.src="../../../../static/img/images/dataerror3.png"}' />
	     			<div class="yybf flex align_center justify_cen">
						<span style="border: 1px solid #fff;border-radius: 100px;">
							<i :class="data.music_data.yybfTrue?'autobf':'el-icon-caret-right'" ></i>
						</span>		
	     			</div>
	     		</div>
	     		<div class="xiaoxi2_text flex1 align_center">
	     			<div class="xiaoxi2_d1 flex align_center" style="margin-top: 0.5rem;">
	     				<p class="xiaoxi2_p1 flex1">
	     					<span>{{data.music_data.song_name}}</span>
	     				</p>
	     			</div>
	     			<div class="xiaoxi2_d2">
	     				{{data.music_data.singer_name}}
	     			</div>
	     		</div>
     		</div>
     		<div class="dt_img clear2" v-if="data.img_url_list.length!=0" >
     			<div class="clear2" v-if="data.img_url_list.length!=1">
     				<div v-for="(data2,key2) in data.img_url_list" class="clear2 dt_imgdiv" style="float: left;" @click.stop="imageClick(data.img_url_list,key2)" > 
	     				<img :src="data2.img_url_s" :style="{'height':imgheight+'px'}"  @error='(e)=>{e.target.src="../../../../../static/img/images/dataerror3.png"}'  />
	     			</div>
     			</div>
     			<div class="clear2" v-else>
     				<div v-for="(data2,key2) in data.img_url_list" class="clear2 dt_imgdiv imgone" style="float: left;" @click.stop="imageClick(data.img_url_list,key2)" > 
	     				<img :src="data2.img_url_s" :style="{'height':imgheight2+'px'}"  @error='(e)=>{e.target.src="../../../../../static/img/images/dataerror3.png"}'  />
	     			</div>
     			</div>
     		</div>
     		
     		<div class="dt_location" v-if='data.d_address!=null && data.d_address!=""'>
     			{{data.d_address}}
     		</div>
     		<div class="dt_stus flex align_center">
     			<div class="dt_stusd1 ">
     				浏览  {{data.cou}}  
     			</div>
     			<div class="dt_stusd2 flex align_center" @click.stop="shang(data)">
     				<img src="../../../../static/img/images/dt5.jpg" />
     				{{data.reward_count==0?"赏":data.reward_count}}
     			</div>
     			<div class="dt_stusd2 flex align_center">
     				<img src="../../../../static/img/images/dt6.jpg" />
     				{{data.speak_count==0?"评":data.speak_count}}
     			</div >
     			<div class="dt_stusd2 flex align_center" @click.stop="zan(data,key)">
     				<img :src="data.isgood==1?'../../../../static/img/images/dt2_f2.jpg':'../../../../static/img/images/dt7.jpg'" />
     				{{data.good==0?"赞":data.good}}
     			</div>
     			<div class="flex1" style="text-align: right;font-size: 1.5rem;" >
     				<i class="el-icon-more" @click.stop="messageClick(data)"></i>
     			</div>
     			
     		</div>
     		<!--<div class="dt_people" v-if='data.speak_list.length!=0'>
     			<div class="dt_peopled1 clear2 flex" v-for="(data3,key3) in data.speak_list" v-if='key3<2'>
     				<div class="dt_peopleimg">
     					<img :src="data3.head_img_s" @error='(e)=>{e.target.src="../../../../../static/img/images/people.jpg"}'  />
     				</div>
     				<div class="dt_peopletext flex1">
     					<p class="dt_peoplep1">{{data3.username}}
     						<span style="float: right;">{{data3.time_name}}</span>
     					</p>
     					<p class="dt_peoplep2" v-html="data3.content">{{data3.content}}</p>
     				</div>
     			</div>
     			
     		</div>
     		<div class="dt_more" v-if="data.speak_list.length>2">
     			查看全部{{data.speak_count}}条回复
     		</div>-->
     	</div>
     	<div v-if='dtList.length==0'>
     		<p style="height: 6rem;text-align: center;line-height: 6rem;color: #8f8f8f;font-size: 1.3rem;">
     			暂无数据
     		</p>
     	</div>
     	<div class="messagelistshow" :style="{'height':bodyheight+'px'}" v-if="show"></div>
     	<transition name="el-zoom-in-bottom">
	        <div v-show="show" class="messagelist">
	        	<div class="messagelistd">
	        		<p @click="message(1)" :class="messageData.set_alone.is_disturb==1?'hui2':''">消息免打扰</p>
	        		<p @click="message(2)" :class="messageData.set_alone.is_shield==1?'hui2':''">屏蔽TA的动态</p>
	        		<p @click="message(4)" >投诉</p>
	        		<p @click="message(5)" >禁言</p>
	        		<p @click="message(3)" :class="messageData.set_alone.is_black==1?'hui2':''">拉黑</p>
	        		<p @click="message(6)" >冻结</p>
	        		<p v-if="scyz()" @click="message(7)" style="color: #ff4242;">删除</p>
	        		
	        	</div>
	        	<div class="messagelistd">
	        		<p @click="show=false">取消</p>
	        	</div>
	        </div>
	    </transition>
	    <div class="dt_zd" @click="zdclick" v-if="scroll>700">
	    	<img src="../../../../static/img/images/dt_zd.png" />
	    </div>
    </div>
</template>

<script>
	import { Toast } from 'mint-ui';
    export default {
        data: function(){
            return {
            	show:false,
            	bodyheight:0,
                choseI:2,
                imgheight:0,
                num:1,
                dtList:[],
                sw:true,
                totalRecords:0,
                fullscreenLoading: true,
                loading:{},
                yybfTrue:false,
                yymusic:'',
                messageData:{
                	set_alone:{
                		is_disturb:1,
                		is_shield:1,
                		is_black:1
                	}
                },
                scroll:0,
            }
        },
        activated(){
        	if(this.$route.query.qidong==true){
        		this.num=1;
        		this.getDynamicList();
        	}
        	else{
        		if(this.scorrl){
	        		setTimeout(()=>{
		        		document.documentElement.scrollTop= this.scorrl;
	        			document.body.scrollTop=this.scorrl;
		        	},0)
	        		
	        	}
        	}
        },
        mounted(){
        	
        	
        	this.bodyheight=document.body.offsetHeight;	
        	this.imgheight=document.body.offsetWidth*0.95*0.32;
        	this.getDynamicList();
        	let _this=this;
            window.addEventListener('scroll',function(){ 
            	_this.windowScroll = document.body.scrollTop;
                // console.log(document.documentElement.clientHeight+'-----------'+window.innerHeight); // 可视区域高度  
                // console.log(document.body.scrollTop); // 滚动高度  
                // console.log(document.body.offsetHeight); // 文档高度  
                // 判断是否滚动到底部  
                var scrollTop = document.documentElement.scrollTop || document.body.scrollTop
                _this.scroll=scrollTop;
                if(scrollTop + window.innerHeight >=( _this.$refs.dtwidth.offsetHeight-80)) { 
                    // 如果开关打开则加载数据  
                    if(_this.sw==true){  
                        // 将开关关闭  
                        
                        _this.sw = false;  
                        _this.getDynamicList2()
                        
                        
                    }  
                }  
            }); 
        },
      
        
        methods: {
        	yinc(key){
        		if(this.dtList[key]._show==undefined||this.dtList[key]._show==false){
        			this.$set(this.dtList[key],'_show',true)
        		}
        		else{
        			this.$set(this.dtList[key],'_show',false)
        		}
        	},
        	
        	zdclick(){
        		document.documentElement.scrollTop= 0;
	        	document.body.scrollTop=0;
        	},
        	zan(data,key){
        		
        		this.$http.post(this.defines.goodsDynamic, {
						uid: window.uid,
						dy_id:data.d_id,
					}, {
						emulateJSON: true
					})
					.then(
						(data) => {
							
							if(data.data.success){
								let num = parseInt(this.dtList[key].good);
								if(data.data.data.is_goods==1){
									num++;
									this.$set(this.dtList[key],'isgood',1)
								}
								else{
									num--;
									this.$set(this.dtList[key],'isgood',2)
								}
								this.$set(this.dtList[key],'good',num)
							}
							else{
							}
						},
						(error) => {
							console.log(error);
						}
					);
        	},
        	scyz(){
        		if(this.messageData.uid==window.uid){
        			return true;
        		}
        		else{
        			return false;
        		}
        	},
        	imageClick(imgObj,key) {
			    let imgArray = [];
			    for( let i in imgObj){
			    	imgArray.push(imgObj[i].img_url);
			    }
			 	
			    
			    WeixinJSBridge.invoke('imagePreview', {   
			        'current' : imgArray[key],  
			        'urls' : imgArray  
			    });  
			},
        	shang(Data){
        		this.$router.push({
					path: '/ds',
					query:{
						'Data':JSON.stringify(Data),
					}
				})
        	},
        	jump(id){
        		let scrollTop = document.documentElement.scrollTop || document.body.scrollTop
        		this.$router.push({
					path: '/dongtai2',
					query:{
						'dy_id':id,
						'srcoll':scrollTop,
					}
				})
        	},
        	messageClick(data){
        		this.messageData=data;
        		this.show=true;
        	},
        	message(Type){
        		if(Type==5){
        			this.$http.post(this.defines.setUserGag, {
						uid: window.uid ,
						b_uid:this.messageData.uid,
					}, {
						emulateJSON: true
					})
					.then(
						(data) => {
							if(data.data.success){
								this.show=false;
						        Toast('设置成功');
						        this.num=1;
						        this.getDynamicList()
							}
							else{
								Toast(data.data.errmsg);
							}
					        
						},
						(error) => {
							Toast(error);
						}
					);
        			return false;
        		};
        		if(Type==6){
        			this.$http.post(this.defines.setUserFrozen, {
						uid: window.uid ,
						b_uid:this.messageData.uid,
					}, {
						emulateJSON: true
					})
					.then(
						(data) => {
							if(data.data.success){
								this.show=false;
						        Toast('设置成功');
						        this.num=1;
						        this.getDynamicList();
							}
							else{
								Toast(data.data.errmsg);
							}
					        
						},
						(error) => {
							Toast(error);
						}
					);
        			return false;
        		};
        		if(Type==7){
        			this.$http.post(this.defines.delDynamic, {
						uid: window.uid ,
						dy_id:this.messageData.d_id,
					}, {
						emulateJSON: true
					})
					.then(
						(data) => {
							if(data.data.success){
								this.show=false;
						        Toast('设置成功');
						        this.num=1;
						        this.getDynamicList();
							}
							else{
								Toast(data.data.errmsg);
							}
					        
						},
						(error) => {
							Toast(error);
						}
					);
        			return false;
        		};
        		if(Type==4){
        			this.$router.push({
						path: '/dtjb',
						query:{
							'data':JSON.stringify(this.messageData)
						}
					})
        			return false;
        		}
        		this.$http.post(this.defines.setUserShield, {
						uid: window.uid ,
						b_uid:this.messageData.uid,
						type:Type
					}, {
						emulateJSON: true
					})
					.then(
						(data) => {
							if(data.data.success){
								this.show=false;
						        Toast('设置成功');
						        this.num=1;
						        this.getDynamicList();
							}
							else{
								Toast(data.data.errmsg);
							}
					        
						},
						(error) => {
							Toast(error);
						}
					);
        	},
        	yybftrue(url,key){
				
				
				if(!this.dtList[key].music_data.yybfTrue){
					this.yybfTrue=true;
					
					for(let i in this.dtList){
						if(this.dtList[i].music_data){
							if(key==i){
								this.$set(this.dtList[i].music_data,'yybfTrue',true)
							}
							else{
								this.$set(this.dtList[i].music_data,'yybfTrue',false)
							}
						}
					}
					let borswer = window.navigator.userAgent.toLowerCase();  
					setTimeout(()=>{
						if ( borswer.indexOf( "ie" ) >= 0 )  
			            {  
			                var embed = document.getElementById( "embedPlay" );  ;  
			               embed.src=url;
			               embed.volume = 100;
			                embed.play();  
			            } else  
			            {  
			  				let auto = document.getElementById('audioPlay');
			                auto.src=url;
			                auto.play();
			            }  
					},0)
					
				}
				else{
					this.yybfTrue=false;
					this.$set(this.dtList[key].music_data,'yybfTrue',false)
					let borswer = window.navigator.userAgent.toLowerCase();  
					if ( borswer.indexOf( "ie" ) >= 0 )  
			            {  
			                var embed = document.getElementById( "embedPlay" ); 
			                embed.volume = 100;  
			                embed.pause(); 
			            } else  
			            {  
			  				let auto = document.getElementById('audioPlay');
			                auto.pause();
			            }  
				}
				
			},
			fh(){
        		window.history.go(-1);
        	},
        	fb(){
        		this.$router.push({
					path: '/dtdatil',
				})
        	},
        	getDynamicList(){
        		let  loading=this.$loading({
		          lock: true,
		          text: 'Loading',
		          spinner: 'el-icon-loading',
		          background: 'rgba(255, 255, 255, 1)'
		        });
        		this.$http.post(this.defines.getMyDnamicList, {
						uid: window.uid,
						page:this.num,
						limit:'5'
					}, {
						emulateJSON: true
					})
					.then(
						(data) => {
							this.dtList=data.data.data.list;
							this.totalRecords=parseInt(data.data.totalRecords);
							loading.close();
						},
						(error) => {
							console.log(error);
						}
					);
        	},
        	getDynamicList2(){
        		
		        if(this.totalRecords==0){
					setTimeout(()=>{
						this.getDynamicList2()
					},1000)
				}
        		if(Math.ceil(this.totalRecords/5)<=this.num){
        			return false
        		}
        		
        		this.num=this.num+1;
        		this.$http.post(this.defines.getMyDnamicList, {
						uid: window.uid,
						page:this.num,
						limit:'5'
					}, {
						emulateJSON: true
					})
					.then(
						(data) => {
							this.dtList=this.dtList.concat(data.data.data.list);
        					this.sw = true;  
						},
						(error) => {
							console.log(error);
						}
					);
        	},
            chose_i(type) {
				if(this.choseI == type){
					return false
				}
				else{
					this.choseI = type;
				}
				this.num=1;
				this.sw=true;
				this.getDynamicList()
				
			},
        }
    }
</script>
<style>
	
</style>
<style scoped>
    .homePage_title {
		width: 100%;
		padding: 1% 0;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 1;
		background: #fff;
		
		border-bottom: 1px solid #e5e5e5;
	}
	
	.homePage_title span {
		color: #505050;
		font-size: 1.5rem;
		margin: 0 3%;
		padding: 4px 0;
	}
	
	.homePage_titleActive {
		font-size: 1.5rem !important;
		color: #b042ff !important;
		position: relative;
	}
	
	.homePage_titleActive:after {
		position: absolute;
		bottom: 1px;
		left: -1.5px;
		content: '';
		width: 100%;
		height: 0px;
		border-radius: 2px;
		border: 1.5px solid #b042ff;
	}
	
	.homePage_titleImg {
		width: 1.7rem;
	    margin-right: 4%;
	    float: right;
	}
	 .xiaoxi2{
    	width: 93%;
    	padding: 2% 3.5%;
    	padding-bottom: 0;
    	border-bottom: 5px solid #e7e9ee;
    }
    .xiaoxi2_img{
    	width: 3.5rem;
    	height: 3.5rem;
    	border-radius: 5rem;
    	overflow: hidden;
    	margin-right: 4%;
    	position: relative;
    	
    }
    .xiaoxi2_img img{
    	width: 3.5rem;
    	height: 3.5rem;
    	object-fit:cover;
    	display: block;
    }
    .xiaoxi2_d1{
    	height: 2rem;
    	line-height: 2rem;
    }
    .xiaoxi2_p1{
    	font-size: 1.3rem;
    	
    	overflow: hidden;
    	text-overflow: ellipsis;
    	white-space: nowrap;
    }
    .xiaoxi2_p2{
    	color: #8f8f8f;
    	font-size: 1.2rem;
    }
    .xiaoxi2_d2{
    	height: 2.5rem;
    	white-space: nowrap;
    	text-overflow: ellipsis;
    	overflow: hidden;
    	font-size: 1.2rem;
    	color: #4a4a4a;
    	line-height: 2.5rem;
    	width: 100%;
    	
    	
    	
    }
    .yybf{
		width: 5rem;
		height: 5rem;
		background: rgba(0,0,0,0.3);
		text-align: center;
		position: absolute;
		left: 0;
		top: 0;
		color: #fff;
	}
	.yybf .el-icon-caret-right{
		font-size: 3rem;
		border-radius: 100px;
		display: inline-block;
		width: 32px;
		height: 32px;
	}
	.autobf{
		border-right: 5px solid #fff;
		border-left: 5px solid #fff;
		box-sizing: border-box;
		display: block;
		width: 16px;
		height: 16px;
		margin: 8px;
	}
    .xiaoxi2_d3{
    	white-space: nowrap;
    	float: left;
    	padding: 0 2px;
    	margin-right: 8px;
    	color: #fff;
    	font-size: 12px;
    	border-radius: 3px;
    	
    	
    	
    }
    .xiaoxi2_d3 img{
    	height: 10px;
    	margin-top: -2px;
    	margin-right: 4px;
    }
    .dt_text{
    	overflow: hidden;
    	font-size: 1.5rem;
    	line-height: 24px;
    	color: #323333;
    	position: relative;
    	-webkit-flex-wrap:wrap;
	    -webkit-box-lines:multiple;
	    -moz-flex-wrap:wrap;
	    flex-wrap:wrap;
    }
    .dt_text2hide{
    	height: 24px;color: rgb(66, 151, 255);position: absolute;right: 0;bottom: 0;z-index: 1;font-size: 1.5rem;background: #fff;padding: 0 0.5rem;opacity: 0.9;
    
    }
    .dt_text2show{
    	height: 24px;color: rgb(66, 151, 255);position: absolute;right: 0;bottom: 0px;z-index: 1;font-size: 1.5rem;background: #fff;padding: 0 0.5rem;opacity: 0.9;
    
    }
    .dt_texthide{
    	max-height: 96px;
    	overflow: hidden;
    }
    .dt_textshow{
    	height: 100%;
    	margin-bottom: 24px;
    }
    .dt_text span{
    	color: #4297ff;
    	position: absolute;
    	background: #fff;
    	right: 0;
    	bottom: 0;
    }
    .dt_img{
    	width: 100%;
    }
    .imgone{
    	width: 50% !important;
    }
    .dt_imgdiv{
    	display: block;
    	float: left;
    	width: 32%;
    	margin: 0 0 1rem 0;
    	object-fit: cover;
    }
    .dt_imgdiv:nth-child(3n-1){
    	margin: 0 2% 1rem 2%;
    }
    .dt_img img{
    	width: 100%;
    	display: block;
    	object-fit: cover;
    }
    
    .dt_location{
    	font-size: 1.2rem;
    	line-height: 2rem;
    	color: #4297ff;
    	margin-bottom: 1rem;
    	
    }
    .dt_location i{
    	color: #ff4242;
    }
    .dt_stus{
    	width: 100%;
    	margin-top: 0.3rem;
    	border-top: 1px solid #f1f1f1;
    	height: 3rem;
    	color: #8f8f8f;
    	font-size: 1.2rem;
    }
    .dt_stusd2{
    	margin-left: 1.5rem;
    	white-space: nowrap;
    	
    }
    .dt_stusd2 img{
    	height: 1.4rem;
    	margin-right: 0.5rem;
    	
    }
    .dt_people{
    	overflow: hidden;
    	width: 100%;
    }
    .dt_peopled1{
    	height: 5rem;
    	box-sizing: border-box;
    	padding: 0.5rem 0;
    	width: 100%;
    }
    .dt_peopleimg{
    	height: 4rem;
    	width: 4rem;
    	float: left;
    	border-radius: 4rem;
    	overflow: hidden;
    	margin: 0 0.5rem;
    }
     .dt_peopleimg img{
    	display: block;
    	float: left;
    	width: 4rem;
    	height: 4rem;
    	object-fit: cover;
    }
    .dt_peopletext{
    	float: left;
    }
    .dt_peoplep1{
    	font-size: 1.2rem;
    	color: #a9a9a9;
    	line-height: 2rem;
    }
    .dt_peoplep2{
    	font-size: 1.5rem;
    	color: #505050;
    	line-height: 2.5rem;
    }
    .dt_more{
    	padding: 1.5rem 0.5rem 0.2rem 0.5rem;
    	width: 100%;
    	font-size: 1.4rem;
    	box-sizing: border-box;
    	color: #4297ff;
    	
    	
    }
    .hui{
    	background: #d1d1d1 !important;
    }
    .messagelist{
		width: 100%;
		padding: 0 2%;
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 3;
		box-sizing: border-box;
	}
	.messagelistd{
		width: 100%;
		overflow: hidden;
		border-radius: 1rem;
		background: #fff;
		opacity: 1;
		margin-bottom: 0.5rem;
	}
	.messagelistd p{
		font-size: 1.5rem;
		height: 4rem;
		color: #4297ff;
		line-height: 4rem;
		text-align: center;
		border-bottom: 1px solid #e7e9ee;
	}
	.messagelistd p:nth-last-child(1){
		border: 0;
	}
	.messagelistshow{
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.5);
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 2;
	}
	.hui2{
		color: #d1d1d1 !important;
	}
	.dt_zd{
		position: fixed;
		bottom: 20%;
		right: 3.5%;
		opacity: 1;
		width: 3rem;
		z-index: 3;
	}
	.dt_zd img{
		width: 100%;
		display: block;
	}
</style>
<style type="text/css">
	.dt_text img{
		height: 24px;
		vertical-align:middle;
	}	
	.dt_peoplep2 img{
		height: 24px;
		vertical-align:middle;
	}
</style>